<html xmlns="http://www.w3.org/1999/xhtml" 
	xmlns:h="http://xmlns.jcp.org/jsf/html"
    xmlns:f="http://xmlns.jcp.org/jsf/core" 
    xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
    xmlns:p="http://primefaces.org/ui">
	<f:view>
		<h:head>
			<h:outputScript library="js" name="jquery.layout-latest.js" />
			<h:outputScript library="js" name="bunsys.js"/>
			<h:outputStylesheet library="css" name="layout-default-latest.css" />
			<h:outputStylesheet library="css" name="bunsys.css"/>
			<h:outputStylesheet library="css" name="fonts.css"/>
			<h:outputStylesheet library="css" name="theme.css"/>
			<title>#{msg['lbl_tituto_aplicacion']}</title>
		</h:head>
		<h:body>
			<h:panelGroup id="layoutPrincipal" layout="block">
				<h:outputText value="#{controller.htmlForm}" />
				<h:form id="#{idForm}">
					<div class="ui-layout-north">
						<ui:include src="/WEB-INF/templates/header.xhtml" />
					</div>
					<!-- ============ 	MENU SECTION ============== -->
					<div class="ui-layout-center">
						<ui:include src="/WEB-INF/templates/menu.xhtml"/>
						<ui:insert name="contentBody"/>
					</div>
					    <!-- ============ FOOTER SECTION ============== -->
					<div class="ui-layout-south">
						<ui:include src="/WEB-INF/templates/footer.xhtml" />
					</div>
					<p:confirmDialog global="true" >
				        <p:commandButton value="#{msg['lbl_si']}" type="button" styleClass="ui-confirmdialog-yes" icon="ui-icon-check" />
				        <p:commandButton value="#{msg['lbl_no']}" type="button" styleClass="ui-confirmdialog-no" icon="ui-icon-close" />
				    </p:confirmDialog>
				</h:form>
				<p:ajaxStatus onstart="PF('statusDialog').show()" onsuccess="PF('statusDialog').hide();" />
 				<p:notificationBar id="barMessages" position="bottom" widgetVar="barMessages">
 					<span class="ui-notificationbar-close">
 						<h:graphicImage library="image" name="closebar.png" onclick="PF('barMessages').hide();"/>
 					</span>
			    	<p:messages globalOnly="true" autoUpdate="true" />
			    </p:notificationBar>
			    <p:outputPanel autoUpdate="true">
					<script type="text/javascript">
						jQuery(document).ready(function() {
							if($("#barMessages > .ui-messages").find("li").length > 0){
								PF('barMessages').show();
							} else{
								PF('barMessages').hide();
							}
						});
					</script>
				</p:outputPanel>
				<p:dialog widgetVar="statusDialog" modal="true" draggable="false" closable="false" resizable="false" showHeader="false">
				    <p:graphicImage library="image" name="ajax-loader.gif" />
				</p:dialog>
			</h:panelGroup>
			<p:outputPanel>
				<ui:insert name="dialogArea" />
			</p:outputPanel>
		</h:body>
	</f:view>
</html>